<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 100px;
				height: 100px;
				background: url(img/5.jpg);
			}
		</style>
	</head>
	<body>
		<div id="box">

		</div>
	</body>
	<script type="text/javascript">
		var box = document.getElementById("box");
		var img = new Image;
		img.width = 100;
		img.height = 100;
		//img对象只要设置了src属性，就会开始加载图片，为了避免图片加载太快的问题，图片的src属性最后才设置呢
		img.onload = function(){
			//加载完毕之后，替换图片
			box.style.background = "none";
		}
		box.appendChild(img);
		img.src = "http://f.hiphotos.baidu.com/image/h%3D300/sign=511a24aa5fb5c9ea7df305e3e538b622/cf1b9d16fdfaaf51965f931e885494eef11f7ad6.jpg";

		
		
		
		
		
		
	</script>
</html>
